<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ include file="../common/header.jsp"%>

<script type="application/javascript" src="/static/webjars/layui/layui.js" charset="utf-8"></script>

<div class="layui-card" height="100%">
    <div id="saper-container">
        <div id="saper-bd">
            <div class="subfiled clearfix">
                <h2>重点事件分类管理</h2>

                <div class="layui-col-md2 layui-btn" style="background-color:#6ec673; float: right;height: 30px;margin-top: 1px;line-height: 30px;width: 60px;margin-right: 10px;margin-left: 2px;" onclick="refresh('/supervise/thing_category_addinfo')">
                    添加
                </div>
                <div class="layui-col-md2" style="float: right;height: 30px;margin-top: 1px;line-height: 30px;width: 10px;margin-right: 10px;margin-left: 2px;" >
                </div>
                <div class="layui-col-md1 layui-btn" onclick="search();" style="background-color:#3b9fe1;float: right;height: 30px;margin-top: 1px;line-height: 30px;width: 60px;margin-right: 10px;margin-left: 2px;" >
                    搜索
                </div>
                <div class="layui-col-md2 layui-btn-danger" style="float: right">
                    <input type="text" id="searchvalue" placeholder="请输入搜索内容" autocomplete="off" class="layui-input" style="height: 33px;">
                </div>

            </div>
        </div>
    </div>
    <div class="layui-card-body" style="position:relative;padding:0px;border:0px;margin-bottom:0px;height:100%; ">
        <div class="layui-row">
            <div class="layui-col-xs12">
                <div class="grid-demo">
                    <table class="layui-hide" id="data" lay-filter="data"></table>
                </div>
            </div>
        </div>
    </div>
</div>


<%@ include file="../common/footer.jsp"%>


<script type="application/javascript">
    //监听工具条

    var table = layui.table;
    var layer = layui.layer;
    var limitNum = 15;
    var limitNums = [15,30,45,60,75,90]
    //方法级渲染

    layui.use('table', function() {
        table.render({
            elem: '#data'
            ,url: '/ajax/search/getimpcategory-limit'
            ,method: 'post'
            ,request: {
                pageName: 'limitPage' //页码的参数名称，默认：page
                ,limitName: 'limitNum' //每页数据量的参数名，默认：limit
            }
            ,response: {
                statusName: 'res' //数据状态的字段名称，默认：code
                ,statusCode: 1 //成功的状态码，默认：0
                ,msgName: 'code' //状态信息的字段名称，默认：msg
                ,countName: 'count' //数据总数的字段名称，默认：count
                ,dataName: 'data' //数据列表的字段名称，默认：data
            }
            ,where: {
                status: '1'
            }
            ,limit: limitNum
            ,limits: limitNums
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
            }
            ,cols: [[

                {field:'id', title: 'ID', width:80, sort: true, fixed: true}
                ,{field:'event_name', title: '事件名称'   }
                ,{field:'event_type', title: '分类名'   }
                ,{field:'event_area', title: '事件区域' }
                ,{field:'event_time', title: '时间' }
                ,{field:'maname', title: '管理人名'  }
                ,{field:'tellphone', title: '联系电话' }
                ,{field:'right', title: '管理',   style:'text-align:center;',align:'center', toolbar: '#manageBar'}
            ]]

        });
    });


    //监听工具条
    table.on('tool(data)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象

        if(layEvent === 'detail'){ //查看
            /*getHor(data.id);*/

            layer.open({
                type: 2,
                title: '',
                /*  btn: ['取消'],*/
                btnAlign: 'c',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area: ['70%', '80%'],
                content: '/supervise/thing_category_detail',
                success: function(layero, index){
                    var body = layer.getChildFrame('body', index);
                    body.contents().find("#id").val(data.id);
                    body.contents().find("#event_name").val(data.event_name);
                    body.contents().find("#event_type").val(data.event_type);
                    body.contents().find("#event_area").val(data.event_area);
                    body.contents().find("#born").val(data.event_time);
                    body.contents().find("#maname").val(data.maname);
                    body.contents().find("#tellphone").val(data.tellphone);


                }

            });

        }else if(layEvent === 'trajectory'){

        } else if(layEvent === 'del'){ //删除
            layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                //向服务端发送删除指令
                dataDelete(data);
            });
        } else if(layEvent === 'edit'){ //编辑
            //do something

            //同步更新缓存对应的值
            obj.update({
                username: '123'
                ,title: 'xxx'
            });
        }
    });


</script>

<script type="application/javascript">

    //更新接口
    function dataSave(data){
        $.ajax({
            url: "/ajax/save/keycategory",
            type: "POST",
            contentType : 'application/json;charset=utf-8',
            //设置请求头信息
            dataType:"json",
            data: JSON.stringify(data),
            success: function(data){
                layer.msg(data.code);
            },
            error: function(res){
                layer.msg(res);
            }
        });
    }

    function dataDelete(data){
        $.ajax({
            url: "/ajax/delete/keycategory-delete",
            type: "POST",
            contentType : 'application/json;charset=utf-8',
            //设置请求头信息
            dataType:"json",
            data: JSON.stringify(data),
            success: function(data){
                layer.msg(data.code);
            },
            error: function(res){
                layer.msg(res);
            }
        });
    }



    function getHor(id){
        $.ajax({
            url: "/ajax/search/getgis",
            type: "POST",
            contentType : 'application/x-www-form-urlencoded;charset=utf-8',
            data: {
                tableName: '重点事件分类管理人员表',
                idIndex: id,
                limitPage: '1',
                limitNum: '10'
            },
            success: function(res){
                layer.open({
                    type: 1,
                    area: ['80%','90%'],
                    content: timeLine(res.data)  //这里content是一个普通的String
                });
            },
            error: function(res){
                layer.msg(res);
            }
        });

    }
</script>

<script type="text/html" id="manageBar">

    <a class="layui-btn layui-btn-xs" lay-event="detail">查看与修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

<script type="application/javascript">

    function search() {//数据

        var search = $("#searchvalue").val();
        table.reload("data", {
            elem: '#data'
            , url: '/ajax/search/getimpcategory-limit'
            , method: 'post'
            , request: {
                pageName: 'limitPage' //页码的参数名称，默认：page
                , limitName: 'limitNum' //每页数据量的参数名，默认：limit
            }
            , response: {
                statusName: 'res' //数据状态的字段名称，默认：code
                , statusCode: 1 //成功的状态码，默认：0
                , msgName: 'code' //状态信息的字段名称，默认：msg
                , countName: 'count' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            }
            ,where: {
                status: '1',
                search: search
            }
            , limit: limitNum
            , limits: limitNums
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
            }
            , cols: [[

                {field:'id', title: 'ID', width:80, sort: true, fixed: true}
                ,{field:'event_name', title: '事件名称' }
                ,{field:'event_type', title: '分类名' }
                ,{field:'event_area', title: '事件区域'  }
                ,{field:'event_time', title: '时间' }
                ,{field:'maname', title: '管理人名'  }
                ,{field:'tellphone', title: '联系电话'  }
                ,{field:'right', title: '管理',   style:'text-align:center;',align:'center', toolbar: '#manageBar'}
            ]]

        });
    }
</script>
